<template>
  <div>
    <div ref="table" style="position: absolute; width: 600px;height:400px;left:20px;top:20px;"></div>
  </div>
</template>

<script>
import { InputEditor, DateInputEditor } from '@visactor/vtable-editors';
const date_input_editor = new DateInputEditor();
import { VTableSheet, VTable } from '@visactor/vtable-sheet';
VTable.register.editor('dateEditor', date_input_editor);

export default {
  name: '',
  props: [],
  components: {},
  data() {
    return {
      tableInstance: null,
    };
  },
  created() {},
  mounted() {
    this.createTable();
  },
  methods: {
    createTable() {
      const container = this.$refs.table
      this.tableInstance = new VTableSheet(container, {
        showFormulaBar: true,
        showSheetTab: true,
        sheets: [
          // 员工数据表格页
          {
            sheetKey: 'employees',
            sheetTitle: '员工数据',
            columns: [
              { title: '姓名', width: 100 },
              { title: '部门', width: 120 },
              { title: '职位', width: 120 },
              { title: '入职日期', width: 120, editor: 'dateEditor' },
              { title: '工资', width: 100 }
            ],
            data: [
              ['张三', '技术部', '工程师', '2022-01-15', 12000],
              ['李四', '市场部', '经理', '2020-06-20', 18000],
              ['王五', '技术部', '高级工程师', '2021-03-10', 15000],
              ['赵六', '人力资源', '专员', '2022-09-01', 9000]
            ]
          }
        ]
      });
    }
  },
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
</style>
